<template>
    <div :id="id" class="container" ref="echart"></div>
</template>
<script>
import baseComp from "./baseComp";

export default {
    name: "proportionChart",
    extends: baseComp,
    props: {
        myData: {
            type: Object,
            default: () => {
            },
        },
        requstParams: {
            type: Object,
            default: () => {
            },
        },
    },
    data() {
        return {
            id: 'myProportion',
            chartView: null,
            option: {
                tooltip: {
                    show: true,
                },
                legend: {
                    orient: '',
                    x: '',
                    y: '',
                    // itemWidth: '',
                    // itemHeight: '',
                    // itemGap: ''
                    icon: '',
                    backgroundColor: 'none',
                    textStyle: {
                        fontSize: '10',
                        color: 'black'
                    },
                },
                title: [
                    {
                        text: '主标题',
                        x: '346',
                        y: '45',
                        textStyle: {
                            //设置字体样式
                            color: '#a55e5a',
                            fontSize: 16,
                            fontFamily: 'sans-serif'
                        }
                    },
                    {
                        subtext: '',
                        x: '346',
                        y: '45',
                        subtextStyle: {
                            //设置字体样式
                            color: '#0DBC79',
                            fontSize: 14,
                            fontFamily: 'sans-serif'
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'left'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 10,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: []
                    }
                ]
            },
        };
    },
    components: {},
    created() {
    },
    mounted() {
        // this.initChart();
        // 请求初始化数据
        // this.$nextTick(() => {
        //   console.log(this.requstParams);
        //   let url = this.requstParams.initUrl;
        //   let method = this.requstParams.initMethod;
        //   // let requstForm = this.requstParams.initRequstForm;
        //   if (url && method) {
        //     let form = this.getRequestParam()
        //     this.init(method, url, form);
        //   }
        // });
    },

    watch: {
        myData: {
            handler(val) {
                this.initData();
                this.initChart();
                // if (this.myData.icon.height || this.myData.icon.height) {
                // this.resizeContainer();
                // }
            },
            deep: true,
            immediate: true
        },
        requstParams: {
            handler(val) {
                if (val) {
                    // 用于echart的画图的id，当相同图表同时渲染是，id可作用唯一键
                    this.id = val.id
                    if (val.newHeight || val.newWidth) {
                        if (!this.chartView) {
                            this.initChart();
                        }
                        this.resizeContainer();
                    }
                    this.getRemoteData();
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        /**
         * 获取请求参数体
         */
        getRequestParam() {
            let requstForm = this.requstParams.initRequstForm;
            let form = {}
            if (requstForm) {
                for (let i = 0; i < requstForm.length; i++) {
                    form[requstForm[i].label] = requstForm[i].value;
                }
            }
            return form
        },

        /**
         * 初始化echarts图形化实列
         */
        initChart() {
            if (!this.chartView) {
                this.$nextTick(() => {
                    let dom = this.$refs.echart;
                    this.chartView = this.$echarts.init(dom);
                    this.chartView.setOption(this.option);
                    let myChart = this.chartView;
                    window.addEventListener("resize", () => {
                        myChart.resize();
                    });
                })
            }
        },
        /**
         * 初始化option配置属性
         */
        initData() {
            //  this.option.backgroundColor=this.myData.backgroundColor;
            let obj = this.myData;
            console.log('myData', obj)
            // 主标题
            this.option.title[0].text = obj.host.text;
            this.option.title[0].x = obj.host.xData;
            this.option.title[0].y = obj.host.yData;
            this.option.title[0].textStyle.fontSize = obj.host.fontSize;
            this.option.title[0].textStyle.color = obj.host.color;
            this.option.title[0].textStyle.fontFamily = obj.host.fontFamily;
            // 副标题
            // this.option.title[1].subtext ? this.option.title[1].subtext : obj.deputy.text;
            this.option.title[1].subtext = obj.deputy.text;
            this.option.title[1].x = obj.deputy.xData;
            this.option.title[1].y = obj.deputy.yData;
            this.option.title[1].subtextStyle.fontSize = obj.deputy.fontSize;
            this.option.title[1].subtextStyle.color = obj.deputy.color;
            this.option.title[1].subtextStyle.fontFamily = obj.deputy.fontFamily;
            // 提示框
            this.option.tooltip.show = obj.tooltip.isShow;
            // 图例设置
            this.option.legend.orient = obj.legend.direction;
            this.option.legend.x = obj.legend.xData;
            this.option.legend.y = obj.legend.yData;
            this.option.legend.icon = obj.legend.icon;
            this.option.legend.backgroundColor = obj.legend.backgroundColor;
            this.option.legend.textStyle.color = obj.legend.fontColor;
            this.option.legend.textStyle.fontSize = obj.legend.fontSize;
            // 值域展示
            this.option.series[0].radius[0] = obj.visibility.inSize;
            this.option.series[0].radius[1] = obj.visibility.outSize;
            this.option.series[0].label.position = obj.visibility.direction;
            this.option.series[0].label.show = obj.visibility.show;
            this.option.series[0].labelLine.show = obj.visibility.labelLineShow;
            // 图表大小
            this.option.series[0].center[0] = obj.icon.width;
            this.option.series[0].center[1] = obj.icon.height;
            //数据映射(对象数组)
            this.option.series[0].data = obj.data;
        },
        //***通过数据映射值赋值****
        // getDataByMapping(result) {
        //     let data = []
        //     let obj = this.myData;
        //     //映射值
        //     let mapping = obj.initDataMapping
        //     let form = {}
        //     if (mapping.length) {
        //         for (let i = 0; i < mapping.length; i++) {
        //             form[mapping[i].label] = mapping[i].value;
        //         }
        //         if (!this.isEmptyObject(form) && result) {
        //             for (const key1 in form) {
        //                 // 遍历第二个对象的属性
        //                 for (let key2 in result) {
        //                     // 判断两个属性的值是否相等
        //                     if (key1 === key2) {
        //                         let dataObj = {value: '', name: '', itemStyle: {color: ''}};
        //                         //颜色配置
        //                         // mapping
        //                         if (key1) {
        //                             dataObj.name = form[key1] + ' : ' + result[key2]
        //                             dataObj.value = result[key2]
        //                             dataObj.itemStyle.color = result[key2].color
        //                         } else {
        //                             dataObj.name = result[key2]
        //                             dataObj.value = result[key2]
        //                             dataObj.itemStyle.color = result[key2].color
        //                         }
        //                         data.push(dataObj)
        //                     }
        //                 }
        //             }
        //             // this.option.series[0].data = data;
        //             this.$set(this.option.series[0], "data", data)
        //             this.chartView.setOption(this.option);
        //         }
        //         // this.$set(this.option.series[0], "data", data)
        //     } else {
        //         this.option.series[0].data = obj.data;
        //         this.chartView.setOption(this.option);
        //         // this.$set(this.option.series[0], "data", obj.data)
        //     }
        //     //设置标题映射值
        //     if (obj.deputy.dictionary) {
        //         //获取字段属性
        //         for (const key2 in result) {
        //             if (key2 === obj.deputy.dictionary) {
        //                 this.$set(this.option.title[1], "subtext", result[key2])
        //                 break;
        //             }
        //         }
        //     } else {
        //         this.$set(this.option.title[1], "subtext", obj.deputy.text)
        //     }
        // },

        //***通过数据映射值赋值****
        getDataByMapping(result) {
            // 结果值
            let data = []
            let obj = this.myData;
            //映射值
            let mapping = obj.initDataMapping
            let form = {}
            for (let i = 0; i < mapping.length; i++) {
                let label = mapping[i].label
                let value = mapping[i].value
                let color = mapping[i].color
                form[label] = {'color': color, 'title': value}
                for (const key in result) {
                    let config = form[key]
                    if (config) {
                        let dataObj = {value: '', name: '',};
                        dataObj['value'] = result[key]
                        dataObj['itemStyle'] = {color: config.color}
                        if (config.title) {
                            dataObj['name'] = config.title + ':' + result[key];
                        }
                        data.push(dataObj)
                    }
                }
            }
            // this.option.series[0].data = data;
            this.$set(this.option.series[0], "data", data)
            //设置标题映射值
            if (obj.deputy.dictionary) {
                //获取字段属性
                for (const key2 in result) {
                    if (key2 === obj.deputy.dictionary) {
                        this.$set(this.option.title[1], "subtext", result[key2])
                        break;
                    }
                }
            } else {
                this.$set(this.option.title[1], "subtext", obj.deputy.text)
            }
            this.chartView.setOption(this.option);
        },

        //***发送请求****
        getData(method, url, params) {
            try {
                return this.$myAxios.request(method, url, params).then((res) => {
                    return res;
                });
            } catch (e) {
                return 0;
            }
        },
        //接口数据
        async init(method, url, requstForm) {
            if (url && url != "" && method && method != "") {
                let res = await this.getData(method, url, requstForm);
                if (res == 0) {
                    return;
                }

                let resData = res.data.data.records[0];
                if (resData) {
                    let result = resData.form;
                    this.initChart();
                    this.getDataByMapping(result)
                }
            }
        },

        resizeContainer() {
            this.$nextTick(() => {
                let container = this.$refs.echart;
                container.style.width = this.requstParams.newWidth + 'px';
                container.style.height = this.requstParams.newHeight + 'px';
                this.chartView.resize();
            })
        },
        // destroyCharts() {
        //   if (
        //       this.chartView != null &&
        //       this.chartView != "" &&
        //       this.chartView != undefined
        //   ) {
        //     this.chartView.dispose();
        //   }
        //   // this.chartView=Echarts.init(this.$refs.chart)
        //   // this.option.series = [];
        // },
        //add**
        // addSeries() {
        //   let result = [
        //     {
        //       name: "A", data: [{
        //         value: 50,
        //         name: "温度",
        //       }]
        //     },
        //   ];
        //   let newResult = [];
        //   if (result.length) {
        //     result.forEach((item) => {
        //       newResult.push({
        //         type: "gauge",
        //         ...item,
        //       });
        //     });
        //   }
        //   this.option.series = newResult;
        //   this.$nextTick(() => {
        //     this.chartView.dispose();
        //     this.initChart();
        //   })
        // },
        //update**
        // updateApi() {
        //   this.destroyCharts();
        //   this.initData();
        //   this.initChart();
        //
        // },
        getRemoteData() {
            let url = this.requstParams.initUrl;
            let method = this.requstParams.initMethod;
            if (url && method) {
                let form = this.getRequestParam()
                this.init(method, url, form);
            }
        },
        /**
         * 定时器，轮询刷新数据
         * @param intervalTime
         */
        initTimer(intervalTime) {
            this.timer = setInterval(() => {
                // this.destroyCharts();
                // this.initData();
                // this.initChart();
                this.getRemoteData();
            }, intervalTime)
        },
    },
};
</script>
<style lang="less" scoped>
.container {
    height: 400px;
    width: 28vw;
}
</style>


